<template>
	<view class="big-box flex-col align-center">
		<!-- <top-navigation bgColor='url(/static/images/homes/background.png)' :isBack="false">
			<text slot='left-slot' class="left-slot">测试</text>
		</top-navigation> -->

		<view class="box_bg">
			<!-- <view class="justify-center" @tap="$navto('/pages/yishou/yishouDetail')"> -->
			<view class="justify-center" >
				<!-- <image class="main-img" src="/static/images/yishou/main-img.png" mode=""></image> -->
				<x-img class="main-img" width="520rpx" height="736rpx" radius="32rpx" :src="cardInfo.image"></x-img>
			</view>
			<view class="align-start flex-col">
				<view class="long-tips">
					<!-- 限量赠送数字龙蛋1个
					<image class="star-icon" src="/static/images/yishou/star.svg" mode=""></image> -->
					<x-img mode='heightFix' class="star-icon" :width="null" height="52rpx" radius="8rpx" :src="cardInfo.icon"></x-img>
				</view>
			</view>

			<view class="justify-between">
				<view class="long-title">
					{{cardInfo.name}}
				</view>
				<view class="long-price">
					¥ <text class="price-num">{{cardInfo.price}}</text>/{{cardInfo.unit}}
				</view>
			</view>
			<view class="bottom-btn justify-center align-center" @tap="calltap">
				联系店长购买
				<view class="shadow">
				</view>

			</view>
		</view>

		<view class="top-box">
			<image class="hot-title" src="/static/images/yishou/zhuanshi.png" mode=""></image>

		</view>
		<view class="feature justify-between">
			<view class="feature-box" @click="featureTap(index)" v-for="item,index in hotList.slice(0,2)" :key="index"
				>
				<image class="bg" :src="item.bg" mode=""></image>
				<!-- 彩色标签 -->
				<view class="label">
					<image class="lable-bg" :src="item.url" mode=""></image>
				</view>
				<view class="info">
					<view class="app-title">
						{{item.title}}
					</view>
					<view class="app-content u-line-2">
						{{item.content}}
					</view>
					<view class="app-btn justify-center align-center"
						:style="{background: `${index==0?'rgb(0, 78, 222)':'rgb(245, 119, 2)'}`}">
						敬请期待
					</view>
				</view>

			</view>
		</view>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="40rpx">
			<view class="popup-one-box flex-col align-center">
				<view class="pop-box-title">
					联系客服
				</view>
				<view class="popup-box-input ">
					<view class="popup-box-input-server justify-between ">
						<view class="justify-start align-center">
							<image src="/static/images/homes/icon-phone.png" mode=""></image>
							客服电话
						</view>
						<view class="popup-box-phone align-center">
							024-12345678<image src="/static/images/homes/icon-more.png" mode=""></image>
						</view>
					</view>
					<view class=" justify-between align-center">
						<view class="justify-start">
							<image src="/static/images/homes/icon-service.png" mode=""></image>
							在线客服
						</view>
						<view class="">
							<image src="/static/images/homes/icon-more.png" mode=""></image>
						</view>
					</view>
				</view>

				<view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
					取消
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				cardInfo:{},
				current: 0,
				moneyShow: false,
				hotList: [{
						url: '/static/images/yishou/app-icon.png',
						title: '大逃杀',
						content: '选择相对应的房间，躲过逃杀，将获得相对应的钻石',
						bg:'/static/images/yishou/yishou-app-bg.svg'
					},
					{
						url: '/static/images/yishou/app-icon1.png',
						title: '幸运大闯关',
						content: '使用钻石兑换闯关生命值 一旦成功还是失败都将...',
						bg:'/static/images/yishou/yishou-app-bg1.svg'
					},
					{
						url: '/static/images/home/h3.webp',
						title: '16.00'
					},
					{
						url: '/static/images/home/h4.webp',
						title: '16.00'
					},
					{
						url: '/static/images/home/h5.jpg',
						title: '16.00'
					},
					{
						url: '/static/images/home/h6.jpg',
						title: '16.00'
					},
				],

				featureGroup: [{
						url: '/static/images/home/banner1.jpg',
						title: '地图'
					},
					{
						url: '/static/images/home/banner2.jpg',
						title: '龙蛋'
					},
					{
						url: '/static/images/home/banner3.jpg',
						title: '推广营销'
					},
					{
						url: '/static/images/home/banner4.jpg',
						title: '会员管理'
					},
					// {
					// 	url: '/static/images/homes/title4.png',
					// 	title: '红包福袋'
					// },
					// {
					// 	url: '/static/images/homes/title5.png',
					// 	title: '订单管理'
					// },
					// {
					// 	url: '/static/images/homes/title6.png',
					// 	title: '渠道码'
					// },
					// {
					// 	url: '/static/images/homes/title7.png',
					// 	title: '联系客服'
					// },
				]


			}
		},
		created() {
			this.getCardInfo()
		},
		methods: {
			async getCardInfo(){
				let url = '/api/v1/card'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					this.cardInfo = data
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
				uni.stopPullDownRefresh ();
			},
			calltap(){
				this.$navto('/pages/yishou/call-manager')
			},
			bannnerBtn(e) {
				console.log(e, 'bannnerBtn');
				if ((this.current + 1) == this.featureGroup.length) {
					// 到达最后一个应该去第一个
					this.current = e > 0 ? 0 : this.current + e
					return
				}
				if (this.current == 0) {
					this.current = e > 0 ? this.current + e : this.featureGroup.length - 1
					return
				}
				this.current += e
				console.log('this.current', this.current);
				// banner按钮点击
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				console.log(e);
				if (e > 1) return
				switch (e) {
					case 0:
						// 资金账户
						this.$navto('/pages/home/fund-account/index', false)
						break;
					case 1:
						// 扫码核销
						this.$navto('/pages/home/scan-code/index', false)
						break;
					case 2:
						// 推广营销
						this.$navto('/pages/home/marketing/index', false)
						break;
					case 3:
						// 会员管理
						this.$navto('/pages/home/member-management/index', false)
						break;
					case 4:
						// 会员中心
						this.$navto('/pages/home/member-center/index', false)
						break;
					case 5:
						// 会员中心
						this.$navto('/pages/home/order-management/index', false)
						break;
					case 6:
						// 渠道码
						this.$navto('/pages/home/channel-code/index', false)
						break;
					case 7:
						// 渠道码
						this.moneyShow = true
						break;
				}
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161e;

		.box_bg {
			width: 100vw;
			height: 1200rpx;
			padding: 30rpx 30rpx 0;
			background: url('/static/images/yishou/box-bg.jpg');
			background-size: 100% 100%;

			.main-img {

				border-radius: 32rpx;
				margin-top: 80rpx;
				width: 520rpx;
				height: 736rpx;
			}
		}

		.bottom-btn {
			width: 100%;
			height: 104rpx;
			border-radius: 8rpx;
			margin: 40rpx 0 60rpx;
			background: linear-gradient(112deg, #FFF4C9 0%, #F4DA8A 100%);
			color: #976c2f;
			font-weight: 700;
			font-size: 30rpx;
			position: relative;
		}

		.shadow {
			position: absolute;
			left: 0;
			bottom: -.3125rem;
			width: 100%;
			height: .40625rem;
			background-color: #cdb363;;
			border-radius: 0 0 8px 8px;
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 8px;
			border-bottom-left-radius: 8px;
			opacity: 1;
			z-index: 1;
		}

		.long-tips {
			position: relative;
			margin: 64rpx 0 36rpx;
			// background: linear-gradient(122deg, #2AD9E9 0%, #F4C0FA 61%, #EDE9B4 100%);
			color: #000;
			font-size: .6875rem;
			font-weight: 700;
			line-height: 1.0625rem;
			height: 1.625rem;
			border-radius: .25rem;
			padding-top: .25rem;
			padding-left: .75rem;
			padding-right: .5rem;
			padding-bottom: .25rem;

			// &:before {
			// 	position: absolute;
			// 	content: "";
			// 	top: .125rem;
			// 	left: .125rem;
			// 	right: .125rem;
			// 	height: 1.375rem;
			// 	border: .03125rem solid #000;
			// 	border-radius: .1875rem;
			// 	box-sizing: border-box;
			// }

			.star-icon {
				top: .25rem;
				left: .3125rem;
				width: .4375rem;
				height: .375rem;
				position: absolute;
			}
		}

		.long-title {
			color: #FFF;
			font-size: 40rpx;
			font-weight: 700;
		}

		.long-price {
			color: #27ff92;
			font-size: 25rpx;

			.price-num {
				font-size: 40rpx;
				font-weight: 700;
			}
		}


	}

	.top-box {
		margin-top: 80rpx;
		width: 690rpx;

		.hot-title {
			width: 170rpx;
			height: 40rpx;
		}



	}

	.feature {
		width: 100%;
		margin-top: 120rpx;
		flex-wrap: wrap;
		padding: 0 30rpx;
		box-sizing: border-box;





		.feature-box {
			margin-bottom: 32rpx;
			width: 320rpx;
			height: 465rpx;
			// background: #20202c;
			box-shadow: 0rpx 6rpx 35rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			position: relative;
			// background: url('/static/images/yishou/yishou-app-bg.svg') no-repeat;
			background-size: 100% 100%;
			.bg{
				width: 320rpx;
				height: 465rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			.label {
				position: relative;
				
				transform: translate(30rpx, -20rpx);

				.lable-bg {
					width: 160rpx;
					height: 160rpx;
					z-index: 111;
				}


			}

			.info {
				position: relative;
				padding: 10rpx 30rpx;
				color: #FFF;

				.app-title {
					font-size: 32rpx;
				}

				.app-content {
					line-height: 1.5;
					margin: 26rpx 0 40rpx;
					font-size: 22rpx;
				}

				.app-btn {
					width: 256rpx;
					height: 76rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					background: rgb(0, 78, 222);
				}
			}



		}

	}

	.popup-one-box {
		padding: 0rpx 52rpx;
		width: 630rpx;
		height: 436rpx;
		background: #FFF;
		box-shadow: 0px 6rpx 14rpx 0px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;

		// 添加红包金额样式
		.pop-box-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin: 47rpx 0 67rpx;
		}



		.popup-box-cancel {
			border: 2rpx solid $uni-text-color-title;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: $uni-text-color-title;
			width: 378rpx;
			height: 72rpx;
		}




		.popup-box-input {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 61rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.popup-box-input-server {
				margin-bottom: 36rpx;

				.popup-box-phone {
					color: $uni-text-color-title;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>